• Has a tree-control record navigator
• Tree-control navigator definition

Tree-control navigator definition

Description

This property gives you access to the Tree-control Navigator Builder where you can define your tree control. Clicking the [...] button to opens the builder.

Tree-Control Navigator Builder

The tree-control navigator builder contains links to two main parts. The first part, which is labeled 'Define Tree-control Navigator', links to a Tree Navigator dialog. In this dialog you can define what data will appear in the tree-control and adjust the control's settings. The second link labeled "Edit Master Template". This link takes you to the Master Template Dialog where you have the option of adjusting the overall placement of the control in your grid component.

Tree Navigator Data Tab

Using the data tab it is possible to add data to a tree control.

The Tree Navigator Data tab

Adding Data to a Tree:

1. Under the first 'Type:' drop down select 'Simple Query'

2. Under the second 'Type:' select 'SQL'.

3. From the 'Connection:' setting locate the Northwind database and connect to it.

4. From the 'Table:' drop down list select the 'Customers' table.

5. In the 'Tree Hierarchy:' work area, add Fields from the Customers table using the Add button.

6. Once adding three or four fields the tree control should look like this:

   

7. View the tree control in Live or Working Preview

   

   A tree control (on left) referencing fields (on right)

Tree Navigator Settings Tab

• Refresh Tree Button

  You can set a property in the builder to add a 'Refresh' button to the Tree Control Navigator

• refreshExternalTreeNavigator Method

  If you have placed a Tree Control Navigator on the Grid, you can alsoforce an Ajax callback to repopulate the Tree. The Grid Object now has a new method: .refreshExternalTreeNavigator() For example, you could have a button on the Grid with this code:

  {grid.Object}.refreshExternalTreeNavigator()

The Tree Navigator Settings tab